<!-- 视图层 -->
<template>
    <div>
      <van-swipe class="my-swipe" :autoplay="3000"
      indicator-color="white">
           <van-swipe-item v-for="(item,index) in bannerList" :key="index">
              <img :src="item.img">
           </van-swipe-item>
          
        </van-swipe>
  
    </div>
  </template>
  
  <!-- 逻辑层 -->
  <script setup>
  import { getBannerList } from '@/api/home';
  import {onMounted, ref} from 'vue'
  let bannerList = ref([])
  
  onMounted(()=>{
      getBannerList().then(({data:res})=> {
          bannerList.value = res.data
      })
  })
  
  </script>
  
  
  <!-- 样式层 -->
  <style scoped>
  .my-swipe{
      height: 200px;
  }
  .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
      background-color: #39a9ed;
    
    }
    .my-swipe .van-swipe-item img{
      width: 100%;
      height: 100%;
    }
  </style>
  